import { css } from '@emotion/core';
import styled from '@emotion/styled';

type WrapperProps = {
  isVisible: boolean;
};

export const Wrapper = styled.section<WrapperProps>`
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #2f343d;

	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
`;

type StyledWebViewProps = {
  isFailed: boolean;
};

export const StyledWebView = styled('webview', {
  shouldForwardProp: (propName) => propName === 'partition',
})<StyledWebViewProps>`
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	${ ({ isFailed }) => css`display: ${ isFailed ? 'none' : 'flex' };` }
`;

type ErrorPaneProps = {
  isVisible: boolean;
};

export const ErrorPane = styled.div<ErrorPaneProps>`
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	user-select: none;

	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` }
`;
